<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link rel="stylesheet" href="../css/elementUI.css">
    <script src="../js/vue.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../js/elementUI.js"></script>
    <script src="../js/util.js"></script>
</head>
<body>
<div id="app">
    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                prop="name"
                label="姓名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="age"
                label="年龄"
                width="180">
        </el-table-column>
        <el-table-column
                prop="date"
                label="时间">
            <template slot-scope="scope">
                {{new Date(scope.row.date).Format("yyyy-MM-dd")}}
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="query.page"
            :page-sizes="[1, 2, 3, 4]"
            :page-size="2"
            layout="total, sizes, prev, pager, next, jumper"
            :total="PageInfo.total">
    </el-pagination>
</div>

<script>
    new Vue({
        el:'#app',
        data:{
            tableData: [],
            query:{
                page:1,
                size:2
            },
            PageInfo:{
                total:0
            }
        },
        watch:{
            query:{
                deep:true,
                handler(){
                    this.initData();
                }
            }
        },
        methods:{
            initData(){
                axios.post(`/user/findPage`,this.query).then(res=>{
                    this.tableData=res.data.records;
                    this.PageInfo.total=res.data.total;
                })
            },
            handleSizeChange(val) {
                this.query.size=val;
            },
            handleCurrentChange(val) {
                this.query.page=val;
            },
        },
        created(){
            this.initData()
        }
    })
</script>
</body>
</html>